import React from "react";
import SearchBar from "../../components/search-bar";
import Moment from "moment";
import TableHeader from "../../components/table-header";
import Pagination from "../../components/pagination";
export default class Wins extends React.Component {

    constructor(...props) {
        super(...props);
        this.state = {
            list: [],
            count: 0,
            keyword: '',
            page: 1,
            size: 30
        };
    }

    loadData(page = this.state.page, keyword = '') {
        if (page != this.state.page) {
            this.setState({page});
        }
        let max = this.state.list.length > 0 && page > 1 ? this.state.list[this.state.list.length - 1].createdAt : 0;
        this.ajax && this.ajax.abort();
        this.ajax = $.get('/admin/prize/wins', {
            max,
            size: this.state.size,
            keyword
        }, (data)=> {
            this.setState({list: data.list, count: Number(data.count)});
        });
    }

    componentDidMount() {
        this.loadData();
    }

    componentWillUnMount() {
        this.ajax && this.ajax.abort();
    }

    onSearch(keyword) {
        this.loadData(1, keyword);
    }

    handleExchange(index, item) {
        $.get('/admin/prize/exchange', {
            code: item.code
        })
            .success((data)=> {
                this.state.list[index].isExchange = 1;
                this.setState({list: this.state.list});
            }, 'json')
            .error((data)=> {
                let json = JSON.parse(data.responseText);
                alert(json.errmsg);
            }, 'json');
    }

    render() {
        const list = this.state.list.map((item, index)=> {
            return (
                <tr key={index}>
                    <td>{item.user.openid}</td>
                    <td>{item.user.nickname}</td>
                    <td>{item.user.realname}</td>
                    <td>{item.user.phone}</td>
                    <td>{item.prize.title}</td>
                    <td>{item.code}</td>
                    <td>{item.user.bank}</td>
                    <td>
                        {item.user.img1 ? <a href={item.user.img1} target="_blank"><img src={item.user.img1} width={40} height={40}/> </a>: null }
                    </td>
                    <td>
                        {item.user.img2 ? <a href={item.user.img2} target="_blank"><img src={item.user.img2} width={40} height={40}/> </a>: null }
                    </td>
                    <td>
                        {item.user.img3 ? <a href={item.user.img3} target="_blank"><img src={item.user.img3} width={40} height={40}/> </a>: null }
                    </td>
                    <td>{new Moment(item.user.createdAt * 1000).format('MM-DD HH:mm')}</td>
                    <td>{new Moment(item.createdAt * 1000).format('MM-DD HH:mm')}</td>
                    <td>{parseInt(item.isExchange) ? '√' : '×'}</td>
                    <td>{!!parseInt(item.isExchange) ? null :
                        <a href="javascript:void(0)" onClick={()=>this.handleExchange(index, item)}>设置为领奖</a>}</td>
                </tr>
            )
        });
        return (
            <div className="site-prize prize-wins">
                <h2>用户列表</h2>
                <p>当前用户数：{this.state.count}&nbsp;<a href="/admin/prize/export" target="_blank"
                                                    className="btn btn-success">导出名单</a></p>
                <SearchBar placeholder="姓名/昵称/手机" onSearch={keyword=>this.onSearch(keyword)}/>
                <div className="table-responsive">
                    <table className="table table-bordered">
                        <TableHeader
                            sections={['openid', '昵称', '姓名', '手机号', '奖品名称', '验证码', '银行', '身份证正面', '身份证反面', '银行卡反面', '注册时间', '中奖时间', '领奖状态', '操作']}/>
                        <tbody>{list}</tbody>
                    </table>
                </div>

                <Pagination pageSize={this.state.size} loader={(page)=>this.loadData(page)} totalRows={this.state.count}
                            currentPage={this.state.page}/>
            </div>
        )
    }
}